<template>
  <div>
    <el-row>
      <el-col :span="8" :offset="8">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
          <el-form-item label="推荐类别">
            <el-select v-model="region" placeholder="请选择类别" style="width:450px">
              <el-option label="网络正能量内容创作者(含账号)" value="网络正能量内容创作者(含账号)"></el-option>
              <el-option label="网络正能量传播者(含账号和平台)" value="网络正能量传播者(含账号和平台)"></el-option>
              <el-option label="网络空间的正能量公众人物" value="网络空间的正能量公众人物"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布平台" prop="platform">
            <el-input
              placeholder="请输入发布平台"
              v-model="ruleForm.platform"
              maxlength="20"
              clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="作品简介" prop="work_intro">
            <el-input
              type="textarea"
              placeholder="请输入作者简介(不超过50字)"
              v-model="ruleForm.work_intro"
              maxlength="50"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <el-form-item label="照片简介" prop="photo_intro">
            <el-input
              type="textarea"
              placeholder="请输入照片简介(不超过50字)"
              v-model="ruleForm.photo_intro"
              maxlength="50"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <el-form-item label="作者简介" prop="author_intro">
              <el-input
                type="textarea"
                placeholder="请输入作者简介(不超过50字)"
                v-model="ruleForm.author_intro"
                maxlength="50"
                show-word-limit
              >
              </el-input>
          </el-form-item>
          <el-form-item label="作品影响" prop="effect">
            <el-input
              type="textarea"
              placeholder="请输入作品影响(不超过50字)"
              v-model="ruleForm.effect"
              maxlength="50"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <br>
          <br>
          <el-form-item >
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              :on-change="handle_success"
              :file-list="fileList"
              :limit="5"
              :on-exceed = "handle_exceed">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">下一步</el-button>
          </el-form-item>
        </el-form>
        <!-- 1、预览 -->
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="预览图片" />
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Activity',
  data () {
    return {
      region: '',
      pstatus: 1,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      files: [],
      tableId: '',
      ruleForm: {
        platform: '',
        effect: '',
        work_intro: '',
        photo_intro: '',
        author_intro: ''
      },
      rules: {
        platform: [
          {required: true, message: '请输入发布平台', trigger: 'blur'},
          {max: 20, message: '最大长度为20', trigger: 'blur'}
        ],
        effect: [
          {required: true, message: '请输入社会效果', trigger: 'blur'},
          {max: 50, message: '最大长度为50', trigger: 'blur'}
        ],
        work_intro: [
          {required: true, message: '请输入作品介绍', trigger: 'blur'},
          {max: 50, message: '最大长度为50', trigger: 'blur'}
        ],
        photo_intro: [
          {required: true, message: '请输入照片介绍', trigger: 'blur'},
          {max: 50, message: '最大长度为50', trigger: 'blur'}
        ],
        author_intro: [
          {required: true, message: '请输入作者介绍', trigger: 'blur'},
          {max: 50, message: '最大长度为50', trigger: 'blur'}
        ]

      }
    }
  },
  created: function () {
    this.createActivity()
  },
  methods: {
    handle_success (file) {
      console.info(file.raw)// 测试信息
      // 将当前文件信息传入file-list，回显
      this.fileList.push({
        name: file.name,
        url: file.url
      })
      this.files.push(file)
      // console.info(this.files)
      // const formData = new FormData()
      // formData.append('id', 16)
      // formData.append('file', file.raw)
      // this.$axios.post('/multiImage/upload', formData)
    },
    handleRemove (file) {
      let index = this.fileList.findIndex(item => item.url === file.url)
      this.fileList.splice(index, 1)
      this.files.splice(index, 1)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      window.open(file.url)
    },
    handle_exceed () {
      window.alert('最多上传5张图片！')
    },
    // 加载页面时初始化上个路由传过来的Id
    createActivity: function () {
      this.tableId = this.$route.params.id
      console.info(this.$route)
      console.info(this.tableId)
      // 向数据库插入一条数据
      this.$axios.post('/activity', {id: this.tableId, pstatus: this.pstatus})
      console.info('test')
    },
    onSubmit: function () {
      let routepath = '/activity/' + this.tableId
      this.$axios.put(routepath, {
        recomType: this.region,
        pstatus: this.pstatus,
        platform: this.ruleForm.platform,
        photoIntro: this.ruleForm.photo_intro,
        authorIntro: this.ruleForm.author_intro,
        workIntro: this.ruleForm.work_intro,
        effect: this.ruleForm.effect
      })
      // 多个文件打包成formData post给后端，只需一次请求
      let formData = new FormData()
      formData.append('id', this.tableId)
      this.files.forEach(el => {
        formData.append('file', el.raw)
      })
      this.$axios.post('/multiImage/upload', formData)
      // let formData = new FormData()
      // formData.append('id', 16)
      // formData.append('file', fileList)
      // this.$axios.post('/multiImage/upload', formData,
      //   {headers: {'Content-Type': 'multipart/form-data'}})
      // let len = this.fileList.length
      // for (let i = 0; i < len; i++) {
      //   let formData = new FormData()
      //   formData.append('id', 16)
      //   formData.append('file', fileList[i])
      //   this.$axios.post('/multiImage/upload', formData,
      //     {headers: {'Content-Type': 'multipart/form-data'}})
      // this.$axios.post('/multiImage/upload', {file: this.fileList[i], id: 16}, {headers: {'Content-Type': 'multipart/form-data'}})
    }
  }
}
</script>

<style scoped>

</style>
